<template>
  <div>
    <!-- <el-dialog :title="'给'+billingData.customerName+'开单'" :visible.sync="modalShow" width="60%" :before-close="modalClose" center> -->
    <el-dialog v-if="modalShow" class="billing wide-popup" title="开单" :visible.sync="modalShow" width="800px" :before-close="modalClose" center>
      <el-form ref="ruleForm" v-loading="submit" :model="ruleForm" style="padding-bottom:30px" :rules="rules" label-width="100px" class="demo-ruleForm">
        <UserInfo v-if="choice" :info-id="ruleForm.customerId" />
        <el-form-item v-else label="顾客" prop="customerId">
          <el-select v-model="ruleForm.customerId" class="el-select-y" filterable placeholder="请选择" style="width: 237.5px" @change="customerChange">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.orderContent !== '余额充值' && warehouseList.length > 1" label="仓库" prop="warehouseId" style="text-align: left;">
          <el-select v-model="ruleForm.warehouseId" class="el-select-y" filterable placeholder="请选择" style="width: 237.5px">
            <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <div v-if="ruleForm.orderContent !== '余额充值'" class="tx">挑选</div>
        <GetProductContent v-if="ruleForm.orderContent !== '余额充值'" ref="GetProductContent" :is-commonly-used="true" :warehouse-id="ruleForm.warehouseId" :tabs-text="tabsText" :get-url="getUrl" @listChange="listChange" />
        <div v-if="selectTables.length > 0">
          <ul>
            <li class="tx">商品清单</li>
            <li v-for="(items, i) of selectTables" :key="i">
              <el-row style="width: 5%">
                <el-col>
                  <el-checkbox v-model="items.checkeds" />
                </el-col>
                <el-col>
                  <el-button type="text" @click="handleDelete(items)"><i class="el-icon-close" /></el-button>
                </el-col>
              </el-row>
              <el-row style="width: 95%">
                <el-row type="flex">
                  <el-col :span="15" class="product">
                    <el-button class="bg" type="text">{{
                      items.productAttrib
                    }}</el-button>
                    <p v-if="items.productAttrib !== '套餐类'" style="margin: 2px 10px 0 10px">
                      {{ items.projectName }}
                    </p>
                    <p v-if="items.productAttrib === '套餐类'" style="margin: 2px 10px 0 10px">
                      {{ items.projectName }}
                    </p>
                    <el-button v-if="items.productAttrib === '套餐类'" class="bg" type="text" @click="seeDetails(items)">详情</el-button>
                  </el-col>
                  <el-col :span="9" style="text-align:right">
                    <el-input-number v-model="items.contentCount" class="el-input-number-y" :min="1" :max="Number(items.usageTimes)" label="描述文字" @change="handleChangeNum" />
                  </el-col>
                </el-row>
                <el-row v-if="items.productAttrib === '项目类'" class="grey" type="flex">
                  <el-col :span="20">
                    <span class="margin-right">规格：{{ items.specifications }}</span>
                    <span class="margin-right">单位：{{ items.unit }}</span>
                    <span>使用次数：{{ items.usageTimes }}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>{{ items.availableStock }}</span>
                  </el-col>
                </el-row>
                <el-row type="flex">
                  <el-col :span="10">
                    <!-- {{ items.discountChecked }} -->
                    主治医生：
                    <el-select v-model="items.attendingDoctor" class="el-select-y margin-y" placeholder="请选择" style="width: 50%;">
                      <el-option v-for="item in options" v-show="(items.productAttrib === '项目类' && item.deptString.indexOf(items.deductionDeptId) > -1) || items.productAttrib !== '项目类'" :key="item.id" :label="item.usrName" :value="item.usrName" />
                    </el-select>
                  </el-col>
                  <el-col v-if="(items.discount && parseInt(items.discount) < 100) || items.productAttrib === '物品类' || items.productAttrib === '药品类'" :span="2" class="margin-right">
                    <el-checkbox v-model="items.discountChecked" :checked="items.discountChecked" @change="handleDiscount(items)">折扣</el-checkbox>
                  </el-col>
                  <el-col v-if="items.discountChecked" :span="5" class="margin-right">
                    <div>折扣率：
                      <el-input v-model="items.discountRate" class="el-select-y" style="width: 40%" @input="discountChange(items)" />
                      %
                      <div v-if="parseInt(items.discountRate) < parseInt(items.discount)" class="font-color">超过折扣下限：{{ items.discount }}%</div>
                    </div>
                  </el-col>
                  <el-col v-if="items.discountChecked" :span="5" class="margin-right">
                    <div>折后价：
                      <el-input v-model="items.discountPrice" class="el-select-y" style="width: 40%" @input="priceChange(items)" />
                      <div v-if="parseInt(items.discountRate) < parseInt(items.discount)" class="font-color">超过折扣下限：{{ items.price * items.discount/100 }}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row type="flex" class="price">
                  <el-col :span="8"> 售价：<span class="span">￥{{ items.price }}{{ items.contentCount>1?' x '+items.contentCount+' = ￥'+Number(items.price)*Number(items.contentCount)*100/100:'' }}</span>
                  </el-col>
                </el-row>
              </el-row></li>
          </ul>
          <el-row style="margin-top:10px">
            <el-col :offset="20" :span="4" class="pull-right">总额：￥{{ allPrice }}</el-col>
            <el-col :offset="20" :span="4" class="pull-right">优惠：-￥{{ discountPrice }}</el-col>
            <el-col :offset="20" :span="4" class="pull-right">合计：<span class="span">￥{{ setMealPrice }}</span></el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="3"> 付款方式 </el-col>
            <el-col :span="22">
              <el-radio v-model="ruleForm.orderPaymentStyle" label="全款" />
              <el-radio v-if="ruleForm.orderContent !== '余额充值'" v-model="ruleForm.orderPaymentStyle" label="定金">定金+尾款</el-radio>
            </el-col>
          </el-row>
          <el-row v-if="ruleForm.orderPaymentStyle === '定金'">
            <el-col :span="2"> 定金支付 </el-col>
            <el-col :span="10">
              <el-input v-model="depositAmount" class="el-select-y" style="width: 70px  " @input="componentBalance" @blur="inputOne" />元
              <span style="margin-left: 20px">尾款需要支付 <span class="span">{{ balancePayment }}</span>元</span>
            </el-col>
            <!-- <el-col :offset="9" :span="6"> 尾款需要支付 <span class="span">{{ balancePayment }}</span>元 </el-col> -->
          </el-row>
        </div>
        <el-row class="butl">
          <el-button class="submitButton" :disabled="selectTables.length > 0 ? false : true" type="primary" @click="handlerSubmit('ruleForm')">提交</el-button>
          <el-button class="submitButtons" plain @click="cancel">取消</el-button>
        </el-row>
      </el-form>
      <el-dialog width="40%" title="套餐详情" :visible.sync="innerVisible" append-to-body>
        <mealDetails :details-id="detailsId" />
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
// import { mapMutations } from 'vuex';
import UserInfo from "@/components/UserInformation";
import mealDetails from "@/components/mealDetails";
import GetProductContent from "@/components/getProductContent";
import { lookup } from '@/utils/common.js';
export default {
  name: "Index",
  components: {
    UserInfo,
    GetProductContent,
    mealDetails,
  },
  props: {
    billingData: {
      type: Object,
      default: () => ({}),
    },
    // choice: {
    //   type: Boolean,
    //   default: true,
    // },
    billType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      innerVisible: false,
      tabsText: [
        { label: "套餐", name: "meal" },
        { label: "项目", name: "product" },
        { label: "物品", name: "drugs" },
      ],
      choice: true,
      getUrl: 'data/goods/treeList',
      modalShow: false,
      ruleForm: {},
      rules: {
        customerId: [
          // 主要需求
          { required: true, message: "请选择顾客", trigger: "change" },
        ],
        // warehouseId: [
        //   { required: true, message: "请选择仓库", trigger: "change" },
        // ],
      },
      option: [],
      search: "",
      tableData: [],
      selectTables: [],
      detailsId: [],
      loading: false,
      submit: false,
      searchVal: {},
      tabsBool: 1,
      allPrice: 0,
      discountPrice: 0,
      setMealPrice: 0,
      depositAmount: 0,
      balancePayment: 0,
      tableDataList: [],
      warehouseList: [],
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.currentUserInfo;
    },
  },
  watch: {
    billingData: {
      handler(newVal) {
        this.ruleForm = {};
        this.ruleForm = newVal;
        this.selectTables = [];
      },
    },
    selectTables: {
      handler(val) {
        if (val && val.length > 0) {
          let allPrice = 0;
          let discountPrice = 0;
          let setMealPrice = 0;
          this.balancePayment = 0;
          val.forEach((item) => {
            if (item.checkeds) {
              allPrice +=
                Math.floor(
                  (Number(item.contentCount) * Number(item.price)).toFixed(2) *
                  100
                ) / 100;
              setMealPrice +=
                Math.floor(
                  (
                    Number(item.contentCount) * Number(item.discountPrice)
                  ).toFixed(2) * 100
                ) / 100;
              this.$nextTick(() => {
                if (this.depositAmount === "1" || this.depositAmount === 1) {
                  this.balancePayment = setMealPrice - 1;
                } else if (Number(this.depositAmount) >= this.setMealPrice) {
                  this.balancePayment = 1;
                  this.depositAmount = setMealPrice - 1;
                } else {
                  this.balancePayment =
                    ((
                      Number(this.setMealPrice) - Number(this.depositAmount)
                    ).toFixed(2) *
                      100) /
                    100;
                  // this.balancePayment = 100;
                }
              });
            }
          });
          setMealPrice = Math.floor(setMealPrice.toFixed(2) * 100) / 100;
          discountPrice = ((allPrice - setMealPrice).toFixed(2) * 100) / 100;
          this.allPrice = allPrice;
          this.discountPrice = discountPrice;
          this.setMealPrice = setMealPrice;
          this.ruleForm.price = setMealPrice;
          this.ruleForm.originalPrice = allPrice;
          this.ruleForm.discountPrice = discountPrice;
          if (
            Number(this.depositAmount) >= this.setMealPrice &&
            this.balancePayment === 0
          ) {
            this.depositAmount = 0;
          }
        }
      },
      deep: true,
      // immediate: true,
    },
    depositAmount: {
      handler() {
        if (this.depositAmount === "1" || this.depositAmount === 1) {
          this.balancePayment = this.setMealPrice - 1;
        } else if (Number(this.depositAmount) >= this.setMealPrice) {
          this.setMealPrice === 0 ? this.balancePayment = 0 : this.balancePayment = 1;
          this.setMealPrice === 0 ? this.depositAmount = this.setMealPrice : this.depositAmount = this.setMealPrice - 1;
        } else {
          this.balancePayment = (Number(this.allPrice) - Number(this.depositAmount) - Number(this.discountPrice)).toFixed(2) * 100 / 100;
        }
      },
    },
  },
  mounted() {
    this.ruleForm = this.billingData;
    this.selectCustomers();
    // this.fetchHospital();
    this.options = lookup("主治医生");
  },
  methods: {
    // handleSex(id) { // 获取顾客性别
    //   if (!id) return false;
    //   this.$api['department/order/customer']({ id }).then(res => {
    //     if (res.code !== 200) return;
    //     // res.data.sex
    //   });
    // },
    // selectEnable(row, rowIndex) {
    //   if (row.disab) {
    //     return false;
    //   } else {
    //     return true;
    //   }
    //   // console.log(row, rowIndex, "row, rowIndexrow, rowIndex");
    // },
    createBill(row) {
      this.modalShow = true;
      this.choice = false;
      this.ruleForm = row;
      this.submit = false;
      this.warehouseListHandle();
    },
    editBill(row) {
      this.submit = false;
      this.modalShow = true;
      this.ruleForm = row;
      this.choice = true;
      this.$api['doctor/consulting/orderDetail']({ id: row.id }).then(res => {
        if (res.code !== 200) return;
        this.selectTables = res.data.orderList;
        if (res.data.orderList && res.data.orderList.length > 0) {
          if (res.data.orderList[0].warehouseId) {
            this.ruleForm.warehouseId = res.data.orderList[0].warehouseId;
          }
        }
        this.selectTables.forEach(item => {
          this.$set(item, "checkeds", true);
          // eslint-disable-next-line
          item.discountChecked = eval(item.discountChecked);
          // Number(item.discount) < 100 ? this.$set(item, 'discountChecked', true) : this.$set(item, 'discountChecked', false);
        });
        this.orderDetails = res.data;
        this.depositAmount = res.data.depositAmount;
        this.$refs.GetProductContent.addContentList(this.selectTables);
        this.warehouseListHandle();
      });
    },
    componentBalance() {
      this.depositAmount = this.depositAmount.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.depositAmount = this.depositAmount.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.depositAmount = this.depositAmount.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.depositAmount = this.depositAmount
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.depositAmount = this.depositAmount.replace(
        /^(\-)*(\d+)\.(\d\d).*$/,
        "$1$2.$3"
      ); // 只能输入两个小数
      this.balancePayment =
        ((Number(this.allPrice) - Number(this.depositAmount)).toFixed(2) *
          100) /
        100;
    },
    inputOne() {
      if (this.depositAmount === "") {
        this.depositAmount = 1;
      }
      this.balancePayment =
        ((Number(this.setMealPrice) - Number(this.depositAmount)).toFixed(2) *
          100) /
        100;
    },
    handlerSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit = true;
          var selectTable = this.selectTables.filter(function(item) {
            item.deptId = item.deductionDeptId;
            item.deptName = item.deductionDeptName;
            if (item.checkeds) {
              return item;
            }
          });
          let isAllow = true;
          selectTable.forEach(item => {
            if (parseInt(item.discountRate) < parseInt(item.discount)) isAllow = false;
          });
          if (!isAllow) {
            this.$message.error("折扣率超过折扣下限，请重新填写");
            this.submit = false;
            return;
          }
          this.ruleForm.orderList = selectTable;
          this.option.forEach((item) => {
            if (typeof this.ruleForm.customerName !== "object") { // customerName
              if (this.ruleForm.customerName === item.value) {
                this.$set(this.ruleForm, "customerName", item.label);
                this.$set(this.ruleForm, "customerId", item.value);
              }
            } else {
              if (this.ruleForm.customerName.label === item.label) {
                this.$set(this.ruleForm, "customerName", item.label);
                this.$set(this.ruleForm, "customerId", item.value);
              }
            }
          });
          this.warehouseList.forEach(item => {
            if (item.id === this.ruleForm.warehouseId) this.ruleForm.warehouseName = item.name;
          });
          this.$set(this.ruleForm, "orderContent", this.selectTables[0].projectName);
          this.$set(this.ruleForm, "billType", this.billType);
          this.ruleForm.depositAmount = this.depositAmount;
          this.ruleForm.balancePayment = this.balancePayment;
          this.ruleForm.createdBy = this.userInfo.usrName
            ? this.userInfo.usrName
            : "";
          this.ruleForm.deptId = this.userInfo.deptUsrList[0].deptId
            ? this.userInfo.deptUsrList[0].deptId
            : "";
          this.ruleForm.deptName = this.userInfo.deptUsrList[0].deptName
            ? this.userInfo.deptUsrList[0].deptName
            : "";
          this.ruleForm.orderPaymentStyle === '全款'
            ? this.$set(this.ruleForm, 'orderType', '全款')
            : this.$set(this.ruleForm, 'orderType', '预定')
          ;
          this.$nextTick(() => {
            if (this.ruleForm.id) {
              this.$api["doctor/consulting/modifyOrder"](this.ruleForm).then(
                (res) => {
                  if (res.code !== 200) return;
                  this.submit = false;
                  this.$message.success("修改订单成功");
                  this.modalShow = false;
                  this.$emit('success');
                  this.tableData = [];
                  this.$refs['ruleForm'].resetFields();
                }
              );
            } else {
              this.$api["doctor/consulting/addOrder"](this.ruleForm).then(
                (res) => {
                  if (res.code !== 200) return;
                  this.submit = false;
                  this.$message.success("开单成功");
                  this.modalShow = false;
                  this.$emit('success');
                  this.tableData = [];
                  this.$refs['ruleForm'].resetFields();
                }
              );
            }
          });
        } else {
          return false;
        }
      });
    },
    async handleDelete(items) {
      // 点击清单列表上的删除
      const confirmResult = await this.$confirm("请确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      } else {
        this.$nextTick(function() {
          this.$refs.GetProductContent.deteleContent(items.id);
        });
      }
    },
    handleChangeNum(value) {
      // 数量的input框
      // this.addPriceMutations([...this.selectTableData1, ...this.selectTableData2, ...this.selectTableData3]);
    },
    discountChange(item) {
      // debugger;
      // 折扣率输入框\discountRate
      if (!item.discountRate) item.discountRate = 0;
      if (!item.discount) item.discount = 0;
      // if (parseInt(item.discountRate) < parseInt(item.discount)) item.discountRate = item.discount;
      if (parseInt(item.discountRate) > 100) item.discountRate = 100;
      item.discountRate = parseInt(item.discountRate);
      const discountPrice = (item.price * item.discountRate) / 100;
      this.$set(item, "discountPrice", Math.floor(discountPrice * 100) / 100);
    },
    priceChange(item) {
      if (!item.discountPrice) item.discountPrice = 0;
      if (parseInt(item.discountPrice) > parseInt(item.price)) item.discountPrice = item.price;
      const discountRate = item.discountPrice / item.price * 100;
      this.$set(item, 'discountRate', Math.round((discountRate + Number.EPSILON) * 100) / 100);
    },
    aa(item) {
      if (Number(item.discountRate) < Number(item.discount)) item.discountRate = item.discount;
      item.discountPrice = 100;
    },
    handleDiscount(item) {
      // 点击折扣
      if (!item.discountChecked) {
        this.$set(item, 'discountRate', 100);
        this.$set(item, 'discountPrice', item.price);
      }
    },
    seeDetails(row) {
      // 查看详情
      this.detailsId = row.id;
      this.innerVisible = true;
    },
    async fetchHospital() {
      // 获取医生
      const res = await this.$api["doctor/consulting/hisusrjobSelect"]({
        hospitalJobName: "主治医生",
      });
      if (res.code !== 200) return this.$message.error("查询医生失败！");
      this.options = [];
      res.data.forEach((item, i) => {
        this.options.push({ value: item.id, label: item.usrName, deptString: item.deptString });
      });
      // this.$message.success("查询医生成功！");
    },
    init() {
      // 初始化
      this.warehouseListHandle();
      this.modalShow = true;
      this.submit = false;
      this.$nextTick(() => {
        this.depositAmount = 0;
        this.balancePayment = this.setMealPrice;
        this.$refs.GetProductContent.addContentList();
      });
    },
    warehouseListHandle() {
      this.warehouseList = [];
      const list = JSON.parse(localStorage.WARE_HOUSE);
      list.forEach(item => {
        if (item.grant.indexOf("前台仓库") > -1) {
          this.warehouseList.push(item);
        }
      });
      if (!this.ruleForm.warehouseId) {
        if (this.warehouseList.length > 0) this.$set(this.ruleForm, 'warehouseId', this.warehouseList[0].id);
      }
    },
    modalClose() {
      this.modalShow = false;
      this.tableData = [];
      this.$refs['ruleForm'].resetFields();
    },
    async selectCustomers() {
      // 查询顾客
      const res = await this.$api["customer/customers/list"]();
      if (res.code !== 200) return this.$message.error("查询顾客失败！");
      this.option = [];
      res.data.result.forEach((item, i) => {
        this.option[i] = { value: item.id, label: item.name };
      });
    },
    cancel() {
      // 取消
      this.modalShow = false;
      this.tableData = [];
      this.$refs['ruleForm'].resetFields();
    },
    customerChange(id) {
      this.option.forEach(item => {
        if (item.value === id) {
          this.ruleForm.customerName = item.label;
        }
      });
    },
    listChange(list) {
      const lists = JSON.parse(JSON.stringify(list));
      // 给selectTables添加新增的数据
      lists.forEach(item => {
        let isTrue = false;
        this.selectTables.forEach(json => {
          if (item.id === json.id) {
            isTrue = true;
          }
        });
        if (!isTrue) {
          this.$set(item, "contentCount", 1);
          this.$set(item, "discountRate", "100");
          this.$set(item, "attendingDoctor", "");
          this.$set(item, "projectId", item.id);
          this.$set(item, "productNo", item.no);
          this.$set(item, "usageCount", item.usageTimes);
          this.$set(item, "checkeds", true);
          this.$set(item, "discountChecked", false);
          if (item.productAttrib === "物品类" || item.productAttrib === "药品类") {
            this.$set(item, "discountPrice", item.sellPrice);
            this.$set(item, "price", item.sellPrice);
            this.$set(item, "projectName", item.name);
          } else {
            this.$set(item, "discountPrice", item.price);
            this.$set(item, "projectName", item.productAttrib === "套餐类" ? item.dataName : item.name);
          }
          this.selectTables.push(item);
        }
      });
      // 删除已取消勾选的数据
      for (let i = 0; i < this.selectTables.length; i++) {
        const item = this.selectTables[i];
        let isTrue = false;
        for (let n = 0; n < lists.length; n++) {
          if (item.id === lists[n].id) {
            isTrue = true;
          }
        }
        if (!isTrue) {
          this.selectTables.splice(i, 1);
          i--;
        }
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.el-select-y /deep/.el-input__inner, .el-select-y .el-select-y{
  padding: 0 10px;
}
/deep/ .el-input--small{
  margin-bottom: 10px;
}

.el-container {
  max-height: 350px;
}
@import './billing.scss';
.tx {
  font-weight: 800;
  margin: 22px 0 20px 0;
}
.el-row,
span {
  line-height: 40px;
}
li {
  display: flex;
  margin-top: 0;
}
.margin-y /deep/.el-input__suffix{
  margin-top: 4px;
}
.el-input-number-y /deep/.el-input__inner{
  border: 1px solid #9baed3;
  /deep/.el-input-number__decrease.is-disabled{
    border-right: 1px solid #9baed3;
    border-left: 1px solid #9baed3;
  }
}

.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC;
  border-radius: 4px;
  border: none;
  color:#fff;
}
.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC !important;
  border-radius: 4px !important;
  color:#fff !important;
}
.submitButton:hover{
  background: #4791d1 !important;
}
.submitButtons{
  background: #EFF3FB !important;
  color: #0278DC !important;
}
.submitButtons:hover{
  background: #46a6ff !important;
  color: #fff !important;
}
.butl{
  display: flex;
  justify-content: center;
  // .submitButton{
  margin-top: 20px;
  // .submitButton{
    // margin-right: 45px;
  // }
  // .submitButtons{
    // margin-left: 45px;
  // }
}

/deep/.el-input-number__decrease{
  border-right: 1px solid #D3DFF7;
}
/deep/.el-input-number__increase{
  border-left: 1px solid #D3DFF7;
}
/deep/.el-input-number__decrease, /deep/.el-input-number__increase{
  color: #D3DFF7;
}
/deep/.el-form-item__label{
  width: 100px !important;
  text-align: left;
}
// .el-col-18{
//   text-align: right;
//   .span{
//     font-size: 18px ;
//   }
// }
.pull-right{
  line-height: 30px !important;
  text-align: right;
}
.pull-right span{
  line-height: 30px !important;
}
.el-radio{
  margin-right: 18px !important;
}
.margin-right{
  margin-right: 18px;
}
.font-color{
  color: red;
}
</style>
